/**
 * Created by prg on 2016/12/22.
 */
// 声明依赖加载项，肯定要依赖gulp本身啦
var gulp = require('gulp');
//给每个文件添加版本号的文件名，这个文件名是根据文件的内容算出来的文件的哈希吗，改变了又会重新生成了
//一个文件给用户加载过，用户那是有缓存的，进行修改之后又发布，如果名字不改变的话，是不行的
//一般就会加上一个版本号，来区分这些版本，这样浏览器就不会访问缓存，而是从服务器那里加载了
//这样就是手动维护版本，保证用户每次刷新完网站后看到的都是最新的内容，但是这样容易会很麻烦
//如果使用哈希码的话，根据文件来计算，如果文件内容不变，哈希码也不变，也是自动的不用人工执行
var rev = require('gulp-rev');
// 文件名改变了，但是标签里的src路径，引用的可能还是老的文件名，用这个插件就可以把引用改成新的
var revReplace = require('gulp-rev-replace');
// 在html中以注释的形式，告诉gulp，哪些文件合并，合并之后叫什么等等
var useref = require('gulp-useref');
//过滤器，从文件流中筛选出需要处理的文件，然后针对这些文件进行处理，处理完之后restore，就是把文件放回水平，接着下面的处理
var filter = require('gulp-filter');
// 压缩js代码的插件
var uglify = require('gulp-uglify');
// 压缩css的插件
var csso = require('gulp-csso');

// 定义一个任务。给一个名字，做什么事情
// gulp.task('task-name',function(){
//
// })
gulp.task('hello',function () {
    console.log('Hello Gulp');
});
// 引入了插件的依赖之后，就可以直接调用插件依赖的方法了
// 直接命令行输入gulp，直接输入回车，会默认执行这个 default 的任务
gulp.task('default', function () {
    var jsFilter = filter('**/*.js', {restore: true});
    var cssFilter = filter('**/*.css', {restore: true});
    var indexHtmlFilter = filter(['**/*', '!**/index.html'], {restore: true});

    // 需要处理的源文件，调用gulp的src方法，gulp.src，拿到需要处理的文件
    return gulp.src('src/index.html')
        // 分析文件中有注释标志的地方，扔到流里面去
        .pipe(useref())
        // 把js文件筛选出来，
        .pipe(jsFilter)
        //做压缩的操作
        .pipe(uglify())
        //仍回到流里面去
        .pipe(jsFilter.restore)
        //对css的操作和对js的操作一样
        .pipe(cssFilter)
        .pipe(csso())
        .pipe(cssFilter.restore)
        // 从所有的文件中，排除首页这个文件，因为接下里要加版本号，对首页加了版本号会报错，所以加版本号的时候就排除出去
        .pipe(indexHtmlFilter)
        .pipe(rev())
        // 加了版本号之后，再将首页恢复过来
        .pipe(indexHtmlFilter.restore)
        // 对于文件的引用进行更新
        .pipe(revReplace())
        // 将文件流放到这个目录下
        .pipe(gulp.dest('dist'));
});
